<template>
    <div class="navbar">
        <el-row justify="center">
            <el-col :span="10">
                <div style="height: 60px; line-height: 60px; background: white; margin-bottom: 2px;">
                    <span style="margin-left: 30px; font-size: 24px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block">
                        <img src="@/assets/logo.png" style="width: 40px; position:relative; top: 10px;">
                        <span style="margin-left: 8px">SQL数据生成工具</span>
                    </span>
                </div>
            </el-col>
            <el-col :span="10">
                <el-menu :default-active="$route.path" mode="horizontal" router>
                    <el-menu-item index="/">首页</el-menu-item>
                    <el-menu-item index="/field">常用字段</el-menu-item>
                    <el-menu-item index="/table">常用表</el-menu-item>
<!--                    <el-submenu index="user-center">-->
<!--                        <template slot="title">个人中心</template>-->
<!--                        <el-menu-item index="/register" @click="showLogin">登录</el-menu-item>-->
<!--                    </el-submenu>-->
                </el-menu>
            </el-col>
            <el-col :span="4">
                <UserView />
            </el-col>
<!--            <div style="flex: 1;text-align: right;margin-right: 10px;">-->
<!--                <UserView />-->
<!--            </div>-->
        </el-row>
    </div>
</template>

<script>
    import UserView from "./UserView";

    export default {
        name: 'Navbar',
        components: {UserView},
        data() {
            return {
                loginDialogVisible: false
            }
        },
        methods: {
            showLogin() {
                this.loginDialogVisible = true;
            }
        }
    }
</script>

<style scoped>
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: white;
    }

    .site-name {
        font-size: 24px;
        font-weight: 700;
        margin-left: 12px;
        vertical-align: middle;
    }
</style>